<template>
  <view class="product-list">
    <view class="product-grid">
      <view v-for="product in products" :key="product.id" class="product-card">
        <image :src="product.img" mode="aspectFill" class="product-image"/>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-price">¥{{ product.price }}</text>
          <text class="product-description">{{ product.description }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { productService } from '../../api/product/product'

const products = ref([])

const getProducts = async () => {
  try {
    const res = await productService.list()
    if (res && res.data) {
      products.value = res.data
    }
  } catch (error) {
    console.error('获取商品列表失败：', error)
  }
}

onMounted(() => {
  getProducts()
})
</script>

<style scoped>
.product-list {
  padding: 20rpx;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-card {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.product-info {
  padding: 16rpx;
}

.product-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}

.product-price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}

.product-description {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style> 